<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
    fieldset {
      width: 600px;
      border: 1px solid blueviolet;
      margin: 50px auto;
    }
    div {
      margin-bottom: 20px;
    }
    input[type='text'] {
      width: 275px;
      height: 35px;
      display: flex; font-size: 18px;
    }
    select {
      display: flex;
    }
    table {
      width: 600px;
      height: 160px;
      border: 2px solid rebeccapurple;
      margin: auto;
      text-align: center;
    }
    thead {
      background: blueviolet;
    }
  </style>
</head>

  <body>
    <div id="app">
      <fieldset>
        <legend>学生录入信息</legend>
        <form action="">
          <label for="username">姓名：</label>
          <input
            type="text"
            placeholder="请输入姓名"
            id="username"
            v-model="person.name"
          />
          <label for="age">年龄：</label>
          <input
            type="text"
            placeholder="请输入年龄"
            id="age"
            v-model="person.age"
          />
          <span>性别：</span>
          <select v-model="person.sex">
            <option value="请选择">请选择</option>
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
          <label for="phone">手机号：</label>
          <input type="text" placeholder="请输入手机号" id="phone" v-model="person.tel"
          />
          <button @click="createUser">创建新用户</button>
          <button @click="baocun">保存编辑</button>
        </form>
      </fieldset>

      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>手机</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody v-for="(item,index) in personList">
          <tr>
            <td>{{ item.name }}</td>
            <td>{{ item.sex }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.tel }}</td>
            <td>
              <button @click="deleteItem(index)">删除</button>
              <button @click="editItem(index)">编辑</button>
            </td>
          </tr>
          <tr>
            <td>
              <p v-show="personList.lenght==0">你还没有创建用户</p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script src="./vue开发版.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          personList: [
            {
              name: '小王',
              age: 23,
              sex: '男',
              tel: 135992300754
            },
            {
              name: '小红',
              age: 20,
              sex: '女',
              tel: 135992300754
            },
            {
              name: '小明',
              age: 23,
              sex: '男',
              tel: 135992300754
            },
            {
              name: '小红',
              age: 20,
              sex: '女',
              tel: 135992300754
            }
          ],
          //保存用户信息的对象
          person: {
            name: '',
            sex: '请选择'
          },
          id: ''
        },
        
        methods: {
          //创建新用户
          createUser() {
            
            if (!this.person.name) {
              alert('请输入用户名');
              return;
            }
            if (!this.person.age) {
              alert('请输入年龄');
              return;
            }
            if (!this.person.sex) {
              alert('请输入性别');
              return;
            }
            if (!this.person.tel) {
              alert('请输入手机号');
              return;
            }
            this.personList.unshift(this.person);
            this.person = {
              name: '',
              sex: '男'
            };
          },
          //删除
          deleteItem(index) {
            this.personList.splice(index, 1);
          },
          // 编辑
          editItem(index) {
            this.id = index;
            this.person.name = this.personList[index].name;
            this.person.age = this.personList[index].age;
            this.person.sex = this.personList[index].sex;
            this.person.tel = this.personList[index].tel;
          },
          //保存编辑
          baocun() {
            console.log(1)
            // if (this.id == '') {
            //   return;
            // }
            this.personList[this.id].name = this.person.name;
            this.personList[this.id].age = this.person.age;
            this.personList[this.id].sex = this.person.sex;
            this.personList[this.id].tel = this.person.tel;
            this.person = {
              name: '',
              sex: '男'
            };
            this.id = '';
          }
        }
      });
    </script>
  </body>
</html>